<template>
    <div id="teachMode" class="flex-center">
        <div class="container">
            <div class="s-24" style="margin-bottom: 30px;text-align: center;font-weight: 500;">请选择课件PPT的启动模式</div>
            <div style="line-height: 28px;text-indent: 30px;color: #606266;">该弹窗仅在首次使用该功能时出现，若后续需要调整设置，请点击个人头像，选择我的-系统设置进行修改</div>
            <div class="modeBox">
                <div class="mode" @click="choseMode('1')">本地模式</div>
                <div class="mode" @click="choseMode('2')">在线模式</div>
                <div class="mode" @click="choseMode('3')">智能模式</div>
            </div>
        </div>
    </div>
</template>

<script>

import bus from '../../../assets/js/bus'
import store from '@/content/store/index.js'
export default {
    data() {
        return {
        }
    },
    created() { },
    computed: {
       
    },
    watch: {
        
    },
    mounted(){

    },
    methods: {
        choseMode(mode){
            localStorage.setItem('teachMode',mode)
            bus.$emit('closeTeachMode')
        },
    }
}
</script>

<style lang="scss">
#teachMode {
    .list-enter-active,
    .list-leave-active {
    transition: all 1s ease;
    }
    .list-enter-from,
    .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
    }
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2022;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    font-family: PingFangSC-Regular, PingFang SC;
    .container {
        width: 50vw;
        max-width: 1170px;
        height: 40vh;
        max-height: 835px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        display: flex;
        // justify-content: center;
        flex-direction: column;
        
        padding: 30px 5vw;
        .modeBox{
            width: 100%;
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-top: 30px;
            .mode{
                width: 7.5vw;
                height: 7.5vw;
                line-height: 8vw;
                border-radius: 4px;
                background-color: #59adee;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}
</style>
